<template>
    <div :id="id" class="cmp cmp-aliplayer"></div>
</template>

<script>
export default {
  name: 'cmp-aliplayer',
  props: {
    options: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
        id: 'player_' + `${Math.random()}`.substring(2),
        videoObj: null,
    }
  },
  beforeDestroy () {
    this.videoObj && this.videoObj.dispose()
  },
  methods: {
    // 播放
    play () {
        if (!window.Aliplayer) return
        if (!this.options.source && !(this.options.vid && this.options.playauth)) {
            this.$toast('请输入视频地址或输入vid和playauth')
            return
        }
        this.videoObj && this.videoObj.dispose()
        let params = {
            id: this.id,
            width: '100%',
            height: '100%',
            autoplay: true,
            isLive: false,
            rePlay: false,
            playsinline: true,
            preload: true,
            vid : this.options.vid || '',
            playauth : this.options.playauth || '',
            encryptType: this.options.encryptType || 0, //当播放私有加密流时需要设置
            controlBarVisibility: "always",
            enableSystemMenu: true,
            useH5Prism: true
        }
        if (this.options.source) params.source = this.options.source
        this.videoObj = new window.Aliplayer(params, (player) => {
            console.log('播放器创建好了。', player)
        })
    },
    // 暂停
    pause () {
        this.videoObj && this.videoObj.pause()
    },
    // 销毁
    destroy () {
        this.videoObj && this.videoObj.pause()
    }
  }
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.cmp-aliplayer {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #333;
}
</style>
